<template>
  <div>
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="所属部门:">
                <el-select
                  v-model="formInline.department"
                  placeholder="请选择所属部门"
                  style="width: 150px"
                >
                  <!-- <el-option label="Zone one" value="shanghai" />
                  <el-option label="Zone two" value="beijing" /> -->
                  <!-- 循环遍历 -->
                  <el-option
                    v-for="item in department"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="患者名字">
                <el-input
                  v-model="formInline.name"
                  placeholder="请输入患者名字"
                />
              </el-form-item>

              <el-form-item label="挂号类型:">
                <el-select
                  v-model="formInline.types"
                  placeholder="请选择所属类型"
                  style="width: 150px"
                >
                  <el-option label="急诊" value="jizhen" />
                  <el-option label="门诊" value="menzhen" />
                </el-select>
              </el-form-item>

              <el-form-item label="挂号时段:">
                <el-select
                  v-model="formInline.region"
                  placeholder="请选择所属时间"
                  style="width: 150px"
                >
                  <el-option label="上午" value="morning" />
                  <el-option label="下午" value="afternoon" />
                  <el-option label="晚上" value="night" />
                  <el-option label="凌晨" value="early" />
                </el-select>
              </el-form-item>

              <el-form-item label="挂号状态:">
                <el-select
                  v-model="formInline.state"
                  placeholder="请选择挂号状态"
                  style="width: 150px"
                >
                  <el-option label="待就诊" value="no" />
                  <el-option label="就诊完成" value="yes" />
                </el-select>
              </el-form-item>

              <!-- 加required就有星号 -->
              <el-form-item label="挂号时间" style="width: 1500px">
                <el-col :span="11">
                  <el-form-item prop="date1">
                    <el-date-picker
                      v-model="formInline.time"
                      type="date"
                      label="挂号费用"
                      placeholder="挂号费用"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <
        <el-table :data="tableData" border show-summary style="width: 100%">
          <el-table-column prop="id" label="挂号ID" width="180" />
          <el-table-column prop="name" label="患者名称" />
          <el-table-column prop="amount1" sortable label="挂号科室" />
          <el-table-column prop="amount2" sortable label="就诊医生" />
          <el-table-column prop="amount3" sortable label="挂号费用" />
          <el-table-column prop="time" sortable label="挂号时间" />
          <el-table-column prop="state" sortable label="挂号状态" />

          <el-table-column label="操作">
            <template slot-scope="scope"></template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import type { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";

const formInline = reactive({
  department: "",
  name: "",
  region: "",
  types: "",
  time: "",
  state: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const onReset = () => {
  // 重置表单
  formInline.department = "";
  formInline.name = "";
  formInline.region = "";
  formInline.types = "";
  formInline.time = "";
  formInline.state = "";
};

//科室组
const department = [
  {
    name: "内科",
    id: 1,
  },
  {
    name: "外科",
    id: 2,
  },
  {
    name: "儿科",
    id: 3,
  },
  {
    name: "妇科",
    id: 4,
  },
  {
    name: "皮肤科",
    id: 5,
  },
  {
    name: "眼科",
    id: 6,
  },
  {
    name: "耳鼻喉科",
    id: 7,
  },
  {
    name: "肿瘤科",
    id: 8,
  },
  {
    name: "骨伤科",
    id: 9,
  },
  {
    name: "康复科",
    id: 10,
  },
  {
    name: "麻醉科",
    id: 11,
  },
];

//查出来的患者数据
interface Product {
  id: string;
  name: string;
  amount1: string;
  amount2: string;
  amount3: number;
}

const tableData: Product[] = [];
</script>

<style scoped>
/* 卡片 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}
</style>
